<template>
  <div class="p-[10px]">
    <div class="flex-x-center mb-[10px]">
      <a-input v-model="value" placeholder="请输入关键字" class="w-[300px]" />
    </div>
    <div>
      <ul class="flex flex-wrap">
        <li v-for="i in taskStore.data" :key="i.id" class="w-[200px] rounded-[6px] bg-white p-4 mr-[10px] mb-[10px]">
          <div>{{ format(i.type) }}</div>
          <p class="text-[12px] my-[10px]"> {{ i.description }}</p>
          <a-button @click="remove(i)" danger>删除任务</a-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useTaskStore } from "@/stores/task";
const taskStore = useTaskStore();

function remove(i) {
  switch (i.type) {
    case "upload":
      window.ipcRenderer.invoke("cancelUpload", i.id);
      break;
    case "setTimeout":
      clearTimeout(i.task);
      taskStore.data = taskStore.data.filter((j) => j.id != i.id);
      break;
  }
}
function format(s: string) {
  switch (s) {
    case "download":
      return "下载";
    case "upload":
      return "上传";
    case "setTimeout":
      return "倒计时任务";
    default:
      return "未知";
  }

}
const value = ref("");
</script>

<style></style>
